import { useIntersectionObserver, useIntervalFn } from '@vueuse/core';
import { ref } from 'vue';

/**
 * 请求按需加载
 * @param apiFn 发送请求函数
 * @returns  🚨 target 用于模板绑定
 */
export const useObserver = (apiFn: () => void) => {
  // 准备个 ref 用于绑定模板中的某个目标元素(DOM节点或组件)
  const target = ref(null);
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
      // console.log('是否进入可视区域', isIntersecting);
      if (isIntersecting) {
        // 当目标元素进入可视区域时，才发送请求
        apiFn();
        // 请求已发送，主动停止检查
        stop();
      }
    },
    {
      threshold: 0,
    }
  );
  // 🚨返回 ref 用于模板绑定，建议返回对象格式支持解构获取
  return { target };
};
/**
 * 通用倒计时功能封装
 * @return count     倒计时秒数
 * @return start(60) 启动倒计时，可传入秒数
 */
export const useCountDown = () => {
  // 倒计时的秒数
  const count = ref(0);

  /*
    pause    暂停定时器的函数
    resume   恢复定时器的函数
  */
  const { pause, resume } = useIntervalFn(
    () => {
      // 定时器内部，时间减少
      count.value--;
      // 如果倒计时减少到 0
      if (count.value <= 0) {
        // 暂停定时器
        pause();
      }
    },
    1000, // 时间间隔
    { immediate: false } // 不立刻执行定时器
  );

  // 开启倒计时
  const start = (second: number) => {
    // 如果倒计时未结束直接退出
    if (count.value !== 0) return;
    if (second > 0) {
      // 初始化验证码时间
      count.value = second;
      // 恢复定时器
      resume();
    }
  };

  // 函数返回值
  return {
    count,
    start,
  };
};
